<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

      <el-form-item label="项目标段" prop="institutionCode">
        <el-select
          v-model="queryParams.institutionCode"
          placeholder="请选择"
          size="small"
          style="width: 240px" @change="handleBidChange"
        >
          <el-option-group
            v-for="group in bidOptions"
            :key="group.name"
            :label="group.name">
            <el-option
              v-for="item in group.bids"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>

      <el-form-item label="期　　次" prop="periodName">
        <el-select v-model="queryParams.periodName" placeholder="请选择" @change="handlePeriodChange">
          <el-option
            v-for="item in periodOptions"
            :key="item.periodName"
            :label="item.periodName"
            :value="item.periodName">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用　　户" prop="user">
        <el-select v-model="queryParams.user" placeholder="请选择">
          <el-option
            v-for="item in userOptions"
            :key="item.user"
            :label="item.name"
            :value="item.user">
          </el-option>
        </el-select>
      </el-form-item>


    </el-form>

    <div>

      <div class="img-list">

        <div class="img-li-box" v-for="(item,key) in reportList" :key="key">
          <img class="img-li-b--url" :src="getIcon()" >
          <div class="img-li-b--bottom">
            <div class="img-li-b--name">{{ item.reportName }}</div>
          </div>

          <!-- 放大icon -->
          <div class="img-li-b--layer" style="width: 100%;" v-on:dblclick="handleOpenReport(item)">
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>

import { init, getReportList } from "@/api/agency/report";
import report from "@/assets/file/report.png";
import { dropDownReportPeriodList } from "@/api/agency/period";
import { dropDownReportUserList } from "@/api/agency/summary";

export default {
  name: "AgencyReport",
  data() {
    return {
      // 报表类型 1计量报表 2汇总报表 3监理报表 4总监报表 6代建报表
      reportType: "6",
      // 报表集合
      reportList: [],
      report: report,
      // 查询参数
      queryParams: {
        institutionCode: null,
        periodName: null,
        user: null,
      },
      // 标段下拉框
      bidOptions:[],
      // 工期下拉框
      periodOptions: [],
      // 用户下拉框
      userOptions: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    /** 初始化标段下拉框 */
    init() {
      init({reportType: this.reportType}).then(response => {
        this.bidOptions = response.bids;
        this.queryParams.institutionCode = response.institutionCode;
        this.periodOptions = response.periods;
        this.queryParams.periodName = response.periodName;
        this.userOptions = response.users;
        this.queryParams.user = response.user;
        this.reportList = response.list;
      });
    },
    getIcon() {
      return this.report;
    },
    // 标段下拉框发生变化
    handleBidChange() {
      this.queryParams.periodName = null;
      this.periodOptions = [];
      this.getList();
      this.getPeriodList();
    },
    // 工期下拉框发生变化
    handlePeriodChange() {
      this.queryParams.user = null;
      this.userOptions = [];
      this.getUserList();
    },
    /** 查询报表列表 */
    getList() {
      getReportList({institutionCode: this.queryParams.institutionCode, reportType: this.reportType}).then(response => {
        this.reportList = response.list;
      });
    },
    /** 获取工期下拉框 */
    getPeriodList() {
      dropDownReportPeriodList({institutionCode: this.queryParams.institutionCode}).then(response => {
        this.periodOptions = response.periods;
        this.queryParams.periodName = response.periodName;
        this.getUserList();
      });
    },
    // 获取用户下拉框
    getUserList() {
      dropDownReportUserList({institutionCode: this.queryParams.institutionCode, periodName: this.queryParams.periodName}).then(response => {
        this.userOptions = response.users;
        this.queryParams.user = response.user;
      });
    },
    /** 打开报表 */
    handleOpenReport(item) {
      console.log("机构编号：" + this.queryParams.institutionCode);
      console.log("工期：" + this.queryParams.periodName);
      console.log("用户：" + this.queryParams.user);
      if (this.queryParams.institutionCode == undefined) {
        this.$modal.msgError("请选择标段");
      } else if (this.queryParams.periodName == undefined) {
        this.$modal.msgError("请选择工期");
      } else if (this.queryParams.user == undefined) {
        this.$modal.msgError("请选择用户");
      } else {
        let routeData = this.$router.resolve({ path: '/agency/report/view/' +
            item.reportId,
          query: {
            reportId: item.reportId,
            reportName: item.reportName,
            reportUrl: item.reportUrl,
            institutionCode: this.queryParams.institutionCode,
            periodName: this.queryParams.periodName,
            user: this.queryParams.user
          } });
        window.open(routeData.href, '_blank');
      }
    }
  }
};
</script>

<style lang="scss">
  .img-list {
    overflow: hidden;
    width: 100%;

    // 文件列表
    .img-li-box {
      float: left;
      text-align: left;
      position: relative;
      display: inline-block;
      width: 200px;
      height: 270px;
      padding: 5px;
      margin: 5px 20px 20px 0;
      border: 1px solid #d1dbe5;
      border-radius: 4px;
      transition: all .3s;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

      // 图片
      .img-li-b--url {
        display: block;
        width: 100%;
        height: 190px;
        margin: 0 auto;
        border-radius: 4px;
      }

      // 底部
      .img-li-b--bottom {
        margin-top: 10px;

        // 名称
        .img-li-b--name {
          width: 90%;
          text-overflow: ellipsis;
          overflow: hidden;
          height: 25px;
          line-height: 25px;
        }
      }

      // 删除按钮
      .img-li-b--delete {
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: #8492a6;
        cursor: pointer;
        font-size: 1.1em;
      }

      // 放大遮罩层
      .img-li-b--layer {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 200px;
        color: #fff;
        text-align: center;
        z-index: 5;
        background-color: rgba(0, 0, 0, .4);

        // 放大按钮
        i {
          font-size: 1.6em;
          margin-top: 80px;
        }
      }

      .img-li-b--delete,
      .img-li-b--layer {
        opacity: 0;
        transition: all .3s;
      }

      // 悬浮可见删除 or 放大按钮
      &:hover {
        .img-li-b--delete,
        .img-li-b--layer {
          opacity: 1;
        }
      }

    }
  }
</style>
